<template>
  <div class="back-page order-detail">
    <HeaderTop>
      <template #left>
        <van-icon
          name="arrow-left"
          @click="router.back()"
          size="20"
          style="transform: translateX(-0.3rem)"
        />
      </template>
      <template #center>
        <div class="fs-2 wd-75 center" style="color: white">订单详情</div>
      </template>
    </HeaderTop>
    <main v-if="orderDetailInfo">
      <section class="rest back-white py-4">
        <van-image
          :src="imgBaseUrl + orderDetailInfo._doc.restaurant_image_url"
          round
          class="border mb-3"
          height="2rem"
          width="2rem"
        ></van-image>
        <span class="mb-5 fs-0 strong text-1">{{ orderDetailInfo._doc.status_bar.title }}</span>
        <van-tag
          v-if="orderDetailInfo._doc.status_bar.title === '支付超时'"
          type="primary"
          plain
          size="large"
          @click="router.push({ name: 'Shop', query: { id: orderDetailInfo._doc.restaurant_id } })"
          >再来一单</van-tag
        >
        <van-tag v-else type="primary" plain size="medium">去支付</van-tag>
      </section>
      <section class="mt-2 back-white">
        <van-cell is-link :to="{ name: 'Shop', query: { id: orderDetailInfo._doc.restaurant_id } }">
          <template #title>
            <span class="fs-3 strong text-2 mr-1">{{ orderDetailInfo._doc.restaurant_name }}</span>
          </template>
          <template #icon>
            <van-image
              :src="imgBaseUrl + orderDetailInfo._doc.restaurant_image_url"
              round
              class="border mr-3"
              height="0.5rem"
              width="0.5rem"
            ></van-image>
          </template>
        </van-cell>
        <van-cell v-for="item in orderDetailInfo._doc.basket.group[0]" :key="item._id" center>
          <template #title>
            <span class="fs-5 mr-1">{{ item.name }}</span>
          </template>
          <template #value>
            <span class="warning">x{{ item.quantity }}</span>
            <span class="ml-7">￥{{ item.price }}</span>
          </template>
        </van-cell>
        <van-cell v-if="orderDetailInfo._doc.basket.packing_fee" center>
          <template #title>
            <span class="fs-5">{{ orderDetailInfo._doc.basket.packing_fee.name }}</span>
          </template>
          <template #value>
            <span class="ml-7">￥{{ orderDetailInfo._doc.basket.packing_fee.price }}</span>
          </template>
        </van-cell>
        <van-cell center>
          <template #title>
            <span class="fs-5">{{ orderDetailInfo._doc.basket.deliver_fee.name }}</span>
          </template>
          <template #value>
            <span class="ml-7">￥{{ orderDetailInfo._doc.basket.deliver_fee.price || 0 }}</span>
          </template>
        </van-cell>
        <van-cell title="" center>
          <template #value>
            <span class="ml-7 warning">实付</span>&nbsp;
            <span class="warning">￥{{ orderDetailInfo._doc.total_amount }}</span>
          </template>
        </van-cell>
      </section>
      <section class="mt-2 back-white">
        <van-cell>
          <template #title>
            <span class="fs-2 text-2 mr-1">配送信息</span>
          </template>
        </van-cell>
        <van-cell center>
          <template #icon>
            <span class="fs-3 text-3 mr-2">送达时间:</span>
          </template>
          <template #title>
            <span class="fs-3 text-3">{{ orderDetailInfo.deliver_time }}</span>
          </template>
        </van-cell>
        <van-cell >
          <template #icon>
            <span class="fs-3 text-3 mr-2">送达地址:</span>
          </template>
          <template #title>
            <span class="fs-3 text-3">{{ orderDetailInfo.addressDetail }}</span>
          </template>
          <template #label>
            <span class="fs-3 text-3">{{ orderDetailInfo.phone }}</span>
          </template>
        </van-cell>
        <van-cell >
          <template #icon>
            <span class="fs-3 text-3 mr-2">配送方式:</span>
          </template>
          <template #title>
            <span class="fs-3 text-3">蜂鸟专送</span>
          </template>
        </van-cell>

      </section>
      <section class="mt-2 mb-10 back-white">
        <van-cell>
          <template #title>
            <span class="fs-2 text-2 mr-1">订单信息</span>
          </template>
        </van-cell>
        <van-cell center>
          <template #icon>
            <span class="fs-3 text-3 mr-2">订单号:</span>
          </template>
          <template #title>
            <span class="fs-3 text-3">{{ orderDetailInfo._doc.id }}</span>
          </template>
        </van-cell>
        <van-cell >
          <template #icon>
            <span class="fs-3 text-3 mr-2">支付方式:</span>
          </template>
          <template #title>
            <span class="fs-3 text-3">{{ orderDetailInfo.pay_method }}</span>
          </template>
        </van-cell>
        <van-cell >
          <template #icon>
            <span class="fs-3 text-3 mr-2">下单时间:</span>
          </template>
          <template #title>
            <span class="fs-3 text-3">{{ orderDetailInfo._doc.formatted_created_at }}</span>
          </template>
        </van-cell>

      </section>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getOrderDetail } from "@/api";
import { user } from "@/store/index";
import { storeToRefs } from "pinia";
import { OrderDetail_format } from "@/type/index";
import { imgBaseUrl } from "dir/env.config";
const props = defineProps({
  orderId: String,
});
const { user_id } = storeToRefs(user());
const router = useRouter();

//订单详情数据
const orderDetailInfo = ref<OrderDetail_format>();
const initData = async () => {
  orderDetailInfo.value = await getOrderDetail<OrderDetail_format>(user_id.value, props.orderId);
  console.log(orderDetailInfo.value);
};
//初始化数据
initData();
</script>

<style lang="scss" scoped>
@import "@/assets/scss/mixin.scss";
.border {
  border: 0.02rem solid $blue;
}
.order-detail {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 25;
  overflow-y: auto;
  @include wh(100%, 100%);
  .rest {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
